import React, { useState, useEffect } from 'react';
import { Button } from '@arco-design/web-react';

interface Props {
  startTime: number; // 开始时间的时间戳（毫秒）
}

const Timer = ({ startTime }: Props) => {
  const [seconds, setSeconds] = useState(0); // 已经过的时间（秒）

  useEffect(() => {
    let timerId: any = null;

    const now = Date.now();
    const elapsedSeconds = Math.floor((now - startTime) / 1000);

    if (elapsedSeconds < 60 * 60 * 24) { // 一天内的计时
      setSeconds(elapsedSeconds);
      timerId = setInterval(() => {
        setSeconds(prevSeconds => prevSeconds + 1);
      }, 1000);
    }

    return () => {
      clearInterval(timerId);
    };
  }, [startTime]);

  const formatTime = (time: number) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  return (
    <div className='text-white'> {formatTime(seconds)}</div>
  );
};

export default Timer;